<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #e74c3c;
      }
      svg {
        margin: 40px;
      }
    </style>
  </head>
  <body>
    <!-- 1)音乐播放动画-->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="80"
      height="100"
      viewBox="0 0 80 100"
    >
      <!-- line 1 -->
      <rect
        fill="#fff"
        width="3"
        height="100"
        transform="rotate(180,3,50)"
      >
        <animate
          attributeName="height"
          values="30; 100; 30"
          dur="1s"
          repeatCount="indefinite"
          begin="0s"
        >
        </animate>
      </rect>
      <!-- line2 -->
      <rect
        x="17"
        fill="#fff"
        width="3"
        height="100"
        transform="rotate(180 20 50)"
      >
        <animate
          attributeName="height"
          values="30; 100; 30"
          dur="1s"
          repeatCount="indefinite"
          begin="0.1s"
        >
        </animate>
      </rect>
      <!-- line3 -->
      <rect
        x="40"
        fill="#fff"
        width="3"
        height="100"
        transform="rotate(180,40,50)"
      >
      <animate
        attributeName="height"
        values="30; 100; 30"
        dur="1s"
        repeatCount="indefinite"
        begin="0.3s"
      >
      </animate>

      </rect>
      <!-- line4 -->
      <rect
        x="60"
        fill="#fff"
        width="3"
        height="100"
        transform="rotate(180 58 50)"
      >
        <animate
          attributeName="height"
          values="30; 100; 30"
          dur="1s"
          repeatCount="indefinite"
          begin="0.5s"
        >
        </animate>
      </rect>
      <!-- line4 -->
      <rect
        x="80"
        fill="#fff"
        width="3"
        height="100"
        transform="translate(0) rotate(180 76 50)"
      >
        <animate
          attributeName="height"
          values="30; 100; 30"
          dur="1s"
          repeatCount="indefinite"
          begin="0.1s"
        >
        </animate>
      </rect>
    </svg>

    <!-- 2.进度条动画 -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="100"
      height="100"
      viewBox="0 0 100 100"
    >
      <circle fill="#fff" stroke="none" cx="6" cy="50" r="6">
        <animate
         attributeName="opacity"
         values="0;1;0"
         dur="1s"
         begin="0s"
         repeatCount="indefinite"
        >
        </animate>
      </circle>
      <circle fill="#fff" stroke="none" cx="26" cy="50" r="6">
        <animate
          attributeName="opacity"
          values="0;1;0"
          dur="1s"
          begin="0.1s"
          repeatCount="indefinite"
        >
        </animate>
      </circle>
      <circle fill="#fff" stroke="none" cx="46" cy="50" r="6">
        <animate
          attributeName="opacity"
          values="0;1;0"
          dur="1s"
          begin="0.2s"
          repeatCount="indefinite"
        >
        </animate>
      </circle>
    </svg>

    <!-- 3.转动动画 -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="100"
      height="100"
      viewBox="0 0 100 100"
    >
      <!-- big circle -->
      <circle
        fill="none"
        stroke="#fff"
        stroke-width="6"
        stroke-miterlimit="15"
        stroke-dasharray="14.2472,14.2472"
        cx="50"
        cy="50"
        r="47"
      >
       <animateTransform
        attributeName="transform"
        type="rotate"
        values="0 50 50;360 50 50"
        dur="5s"
        repeatCount="indefinite"
       >
       </animateTransform>
      </circle>

      <!-- small circle -->
      <circle
        fill="none"
        stroke="#fff"
        stroke-width="1"
        stroke-miterlimit="10"
        stroke-dasharray="10,10"
        cx="50"
        cy="50"
        r="39"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;-360 50 50"
          dur="5s"
          repeatCount="indefinite"
        >
        </animateTransform>
      </circle>

      <!-- rect -->
      <g fill="#fff">
        <rect x="30" y="35" width="5" height="30">
          <animateTransform
           attributeName="transform"
           type="translate"
           values="0 -5; 0 5; 0 -5"
           dur="1s"
           begin="0s"
           repeatCount="indefinite"
          >
          </animateTransform>
        </rect>
        <rect x="40" y="35" width="5" height="30">
          <animateTransform
          attributeName="transform"
          type="translate"
          values="0 -5; 0 5; 0 -5"
          dur="1s"
          begin="0.1s"
          repeatCount="indefinite"
         >
         </animateTransform>
        </rect>
        <rect x="50" y="35" width="5" height="30">
          <animateTransform
          attributeName="transform"
          type="translate"
          values="0 -5; 0 5; 0 -5"
          dur="1s"
          begin="0.2s"
          repeatCount="indefinite"
         >
         </animateTransform>
        </rect>
        <rect x="60" y="35" width="5" height="30">
          <animateTransform
          attributeName="transform"
          type="translate"
          values="0 -5; 0 5; 0 -5"
          dur="1s"
          begin="0.3s"
          repeatCount="indefinite"
         >
         </animateTransform>
        </rect>
        <rect x="70" y="35" width="5" height="30">
          <animateTransform
          attributeName="transform"
          type="translate"
          values="0 -5; 0 5; 0 -5"
          dur="1s"
          begin="0.4s"
          repeatCount="indefinite"
         >
         </animateTransform>
        </rect>
      </g>
    </svg>
  </body>
</html>
